<script setup>
//watch监视多个响应式数据的变化，作用跟vue2一样

//vue3用法
import { watch, ref } from 'vue'
const count = ref(0)
const age = ref(18)
/* //分别监视
watch(count, (newVal, oldVal) => {
  console.log('newVal', newVal)
  console.log('oldVal', oldVal)
})
watch(age, (newVal, oldVal) => {
  console.log('newVal', newVal)
  console.log('oldVal', oldVal)
}) */
//同时监视，有一个值变化就能监视到
watch([count, age], (newVal, oldVal) => {
  console.log('newVal', newVal)
  console.log('oldVal', oldVal)
})
</script>

<template>
  <div>
    count: {{ count }}
  </div>
  <button @click="count++">count++</button>
  <div>age: {{ age }}</div>
  <button @click="age++">age++</button>
</template>

<style lang="scss" scoped>

</style>
